<template>
    <div class="fw-title-com">
        <div
            v-if="title"
            class="fw-title">
            {{ title }}
        </div>
        <div
            v-if="text"
            class="fw-text">
            {{ text }}
        </div>
    </div>
</template>

<script setup lang="ts">
    const props = withDefaults(
        defineProps<{
            title?: string;
            text?: string;
        }>(),
        {}
    );
</script>

<style scoped lang="scss">
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .fw-title-com {
        .fw-title {
            font-family: 'SFProDisplayBlack';
            font-size: pxToRem(56);
            font-weight: 1000;
            margin-bottom: pxToRem(17);
        }
        .fw-text {
            font-family: 'SFProDisplayLight';
            font-size: pxToRem(28);
            color: rgba(0, 0, 0, 0.7);
        }
    }

    // 响应式设计 - 平板端 (768px及以下)
    @include mobile {
        .fw-title-com {
            padding: 0 pxToRem75(20);
            .fw-title {
                font-size: pxToRem75(56);
                margin-bottom: pxToRem75(17);
            }
            .fw-text {
                font-size: pxToRem75(28);
            }
        }
    }
</style>
